<template>
  <!-- 个人信息,默认不可修改信息-->
  <div id="displayInfo">
    <div class="image-nickname">
           <el-row class="demo-avatar demo-basic info-img">
              <el-col :span="12">
                <div class="demo-basic--circle">
                  <div class="block"><el-avatar :size="100" :src="infoForm.circleUrl"></el-avatar></div>
                </div>
              </el-col>
            </el-row>
            <div class="namebox">
              <span class="info-nickname" >{{infoForm.pername}} </span>
            </div>
    </div>
    <div class="info-details" >
          <el-button class="editBtn" type="primary" icon="el-icon-edit" circle @click="setFlag"></el-button>
          <el-form  :model="infoForm" :rules="rules" ref="infoForm" label-width="100px" class="demo-infoForm" >
            <el-form-item class="tiptext" label="用户昵称" prop="name">
              <el-input class="intext" v-model="infoForm.name" :disabled="editFlag"></el-input>
            </el-form-item>
            <el-form-item class="tiptext" label="邮箱地址" prop="email"  >
              <el-input class="intext" v-model="infoForm.email" type="email" disabled="true"></el-input>
            </el-form-item>

            <el-form-item class="tiptext" label="创作文章" prop="blogNum">
              <span class="totalNum">创作了 {{infoForm.totalBlog}} 篇文章</span>
            </el-form-item>
            <el-form-item class="commitbtn">
              <el-button type="primary" @click="submitForm('infoForm')" :disabled="editFlag">确认修改</el-button>
              <el-button @click="resetForm('infoForm')" :disabled="editFlag">重置</el-button>
            </el-form-item>
          </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: 'info-display',
  data () {
    return {
      editFlag: true,
      infoForm: {
        pername: '',
        name: '',
        email: '',
        birthday: '',
        circleUrl: '../../static/back.jpg',
        totalBlog: ''
      },

      rules: {
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        birthday: [
          { type: 'date', message: '请选择日期', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    this.$http.post('http://localhost:8081/perInfo/getSelfInfo', {
      myEmail: window.sessionStorage.getItem('author')
    }).then(res => {
      console.log(res)
      this.infoForm.pername = res.data[0].nickname
      this.infoForm.name = res.data[0].nickname
      this.infoForm.email = res.data[0].email
      this.infoForm.totalBlog = res.data[0].blogNum
    })
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('http://localhost:8081/perInfo/changeSelfInfo', {
            newName: this.infoForm.name,
            myEmail: window.sessionStorage.getItem('author')
          }).then(res => {
            console.log(res)
          })
          alert('修改成功!')
          this.editFlag = true
        } else {
          console.log('修改失败')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$http.post('http://localhost:8081/perInfo/getSelfInfo', {
        myEmail: window.sessionStorage.getItem('author')
      }).then(res => {
        console.log(res)
        this.infoForm.pername = res.data[0].nickname
        this.infoForm.name = res.data[0].nickname
        this.infoForm.email = res.data[0].email
        this.infoForm.totalBlog = res.data[0].blogNum
      })
    },
    setFlag () {
      this.editFlag = false
    }

  }
}
</script>

<style>
  #displayInfo .image-nickname{
    margin-bottom: 60px;
    border-bottom: lightgrey 1px solid;
    height: 150px;
    padding-right: 30px;
  }
  #displayInfo .info-img{
    height: 100px;
    width: 200px;
    top: 25px;
    left: 50px;
  }
  #displayInfo .namebox{
    width: 220px;
    margin-left: 150px;
    text-align: left;
  }
  #displayInfo .intext{
    width: 400px;
    margin-left: -300px;
  }
  #displayInfo .tiptext{
    margin-left: 200px;
  }
  #displayInfo .commitbtn{
    margin-left: -100px;
  }
  #displayInfo .totalNum{
    margin-left: -300px;
  }

  #displayInfo .editBtn{
    position: absolute;
    left: 900px;
    top: 170px;
  }
</style>
